<template>
	<view class="content">
		<view class="tab">
			<view :class="['list',active==0?'active':'']" @tap="changetab(0)">待发起</view>
			<view :class="['list',active==1?'active':'']" @tap="changetab(1)">已发起</view>
			<view :class="['list',active==2?'active':'']" @tap="changetab(2)">已通过</view>
		</view>
		<view v-for="(item,index) in list" :key="index">
			<view class="item">
				<uni-icons type="checkbox" size="24" class="iconbox" v-if="!item.checked&&item.is_bh<=1"
					@tap="check(index)"></uni-icons>
				<uni-icons type="checkbox-filled" size="24" class="iconbox" v-if="item.checked&&item.is_bh<=1"
					@tap="check(index)"></uni-icons>
				<view class="code">
					<text>结算单据编号 {{item.sn_code}}</text>
				</view>
				<view class="list status">
					<text class="name">结算状态</text>
					<text v-if="active==0">
						<text v-if="item.is_bh==0">待发起</text>
						<text v-if="item.is_bh==1">已驳回</text>
					</text>
					<text v-else>
						<text v-if="item.signer_status==1">未对账</text>
						<text v-if="item.signer_status==2">待核对</text>
						<text v-if="item.signer_status==3||item.signer_status==6">已驳回</text>
						<text v-if="item.signer_status==4">核对成功待提交</text>
						<text v-if="item.signer_status==5">审批中</text>
						<text v-if="item.signer_status==7">审批通过，未上传发票</text>
						<text v-if="item.signer_status==8">已作废</text>
						<text v-if="item.signer_status==9">付款中</text>
						<text v-if="item.signer_status==10">付款成功</text>
						<text v-if="item.signer_status==11">付款失败</text>
						<text v-if="item.signer_status==12">已开票</text>
						<text v-if="item.signer_status==13">已上传对账单</text>
					</text>
				</view>
				<view class="list">
					<text class="name"  v-if="active==0">结算金额</text>
					<text class="name" v-else>核对金额</text>
					<text v-if="active==0">{{(item.goods_price*item.goods_real_num).toFixed(2)}}</text>
					<text v-else>{{(item.check_amount*1).toFixed(2)}}</text>
				</view>
				<view class="list">
					<text class="name">订单类型</text>
					<text v-if="item.type=='1'">运输订单</text>
					<text v-else>采购订单</text>
				</view>
				<!-- <view class="list"  v-if="item.type=='1'"> 
					<text class="name">结算商品</text>
					<text v-if="active==0">{{item.goods_name}}</text>
					<text v-else>{{item.purchase_inbound.goods_name}}</text>
				</view> -->
				<!-- <view class="list">
					<text class="name">运输商品</text>
					<text v-if="active==0">{{item.goods_name}}</text>
					<text v-else>{{item.purchase_inbound.goods_name}}</text>
				</view> -->
				<!-- <view class="list">
					<text class="name">结算单价</text>
					<text v-if="active==0">{{(item.goods_price*1).toFixed(2)}}</text>
					<text v-else>{{(item.purchase_inbound.goods_price*1).toFixed(2)}}</text>
				</view> -->
				<!-- <view class="list">
					<text class="name">结算数量</text>
					<text v-if="active==0">{{(item.goods_real_num*1).toFixed(4)}}</text>
					<text v-else>{{(item.purchase_inbound.goods_real_num*1).toFixed(4)}}</text>
				</view> -->
				<view class="list">
					<text class="name">单据日期</text>
					<text v-if="active==0">{{item.signer_date}}</text>
					<text v-else>{{item.create_time}}</text>
				</view>
			</view>
			<view class="btnbox">
				<view class="btn" @tap="download(item.document_url)" 
				v-if="item.document_url&&item.signer_status==4">下载对账单</view>
				<view class="btn" @tap="download(item.document_url)"
				v-if="item.signer_status>9&&item.signer_status<13">查看对账单</view>
				<navigator class="btn" :url="'./settlementInfo?info='+JSON.stringify(item)" 
				v-if="item.document_url&&item.signer_status==4"  hover-class="none">上传对账单
				</navigator>
				<navigator class="btn" :url="'./upload?id=' + item.id"   hover-class="none" v-if="item.signer_status==7">开票</navigator>
				<navigator class="btn" :url="'./settlementInfo?info='+JSON.stringify(item)" hover-class="none">详情
				</navigator>
			</view>
		</view>

		<view class="fixedbtn" v-if="active==0&&list.length>0">
			<view class="btnbox">
				<view class="btn" @tap="dialogToggle">发起结算</view>
			</view>
		</view>

		<!-- 筛选弹窗 -->
		<view class="popup" @tap="close" v-if="showPopup">
			<view class="box" @tap.stop="!close">
				<input type="text" placeholder-class="input-style" placeholder="请输入结算单号" class="ipt" v-model="search" />
				<!-- <uni-data-select v-model="supply" :localdata="range" placeholder="请选择供应商"
					style="margin-bottom: 20rpx;"></uni-data-select> -->
				<!-- <uni-data-select v-model="supply" :localdata="range" placeholder="请选择项目"
					style="margin-bottom: 20rpx;"></uni-data-select> -->
				<view class="uni-list-cell-db ipt">
					<picker mode="date" :value="startDate" @change="bindDateChange">
						<view class="uni-input" v-if="startDate">{{startDate}}</view>
						<view class="input-style" v-else>请选择开始日期</view>
					</picker>
					<text style="color: #999;">——</text>
					<picker mode="date" :value="endDate" @change="bindEndChange">
						<view class="uni-input" v-if="endDate">{{endDate}}</view>
						<view class="input-style" v-else>请选择结束日期</view>
					</picker>
				</view>
				<view class="btnbox">
					<view class="btn" @tap="reset">重置</view>
					<view class="btn search" @tap="searchList">搜索</view>
				</view>
			</view>
		</view>

		<!-- 提交核对弹窗 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="确认" title="提示" content="确认发起结算？"
				@confirm="submit"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		getSettlement,supplySettlementList,supplySettlement
	} from '../../../network/main.js';
	import {
		onShow,
		onLoad,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	const active = ref(0)
	onNavigationBarButtonTap(() => {
		showPopup.value = true
	})
	onShow(() => {
		list.length = 0
		if(active.value==0){
			getlist()
		}else{
			getSettltementList()
		}
	})
	const list = reactive([])
	const getlist = () => {
		let data ={
			sn_code:search.value,
			start_date:startDate.value,
			end_date:endDate.value
		}
		supplySettlementList(data).then(res => {
			res.data.data.map(item => {
				item.checked = false
				item.newPrice = ''
				item.amount = item.goods_real_num * item.goods_price
				return item
			})
			let arr  = res.data.data.sort( function(a, b) {
				return  new Date(b.signer_date) - new Date(a.signer_date)
			})
			Object.assign(list,arr)
			uni.getStorage({
				key: 'settlement',
				success: function(data) {
					let arr2 = JSON.parse(data.data)
					let arr = []
					for (let i = 0; i < list.length; i++) {
						let obj = {}
						obj.id = list[i].id
						obj.value = list[i].amount
						obj.amount = list[i].amount
						obj.checked = false
						let index = arr2.findIndex((item) => item.id == list[i].id)
						if (index >= 0) {
							obj.newPrice = arr2[index].newPrice
						} else {
							obj.newPrice = ''
						}
						obj.is_bh = list[i].is_bh
						arr.push(obj)
					}
					uni.setStorageSync('settlement', JSON.stringify(arr))
				},
				fail() {
					let arr = []
					for (let i = 0; i < list.length; i++) {
						let obj = {}
						obj.id = list[i].id
						obj.value = list[i].amount
						obj.amount = list[i].amount
						obj.newPrice = ''
						obj.checked = false
						arr.push(obj)
					}
					uni.setStorageSync('settlement', JSON.stringify(arr))
				}
			})
		})
	}
	const activetype = ref();
	const  getSettltementList = () =>{
		let data ={
			signer_status:activetype.value,
			sn_code:search.value,
			start_date:startDate.value,
			end_date:endDate.value
		}
		getSettlement(data).then(res=>{
			let arr  = res.data.data.sort( function(a, b) {
				return  new Date(b.create_time) - new Date(a.create_time)
			})
			Object.assign(list, arr)
		})
	}
	const changetab = (type)=>{
		active.value = type
		activetype.value = type
		list.length = 0
		if(type==0){
			getlist()
		}else{
			getSettltementList()
		}
	}
	const check = (index) => {
		list[index].checked = !list[index].checked
		let arr = JSON.parse(uni.getStorageSync('settlement'))
		arr[index].checked = !arr[index].checked
		uni.setStorageSync('settlement', JSON.stringify(arr))
	}
	const showPopup = ref(false)
	const range = reactive([{
			value: 0,
			text: '供应商11'
		},
		{
			value: 1,
			text: '供应商22'
		}
	])
	const search = ref('')
	const supply = ref('')
	const close = () => {
		showPopup.value = false
	}
	const startDate = ref('')
	const bindDateChange = (e) => {
		startDate.value = e.detail.value
	}
	const endDate = ref('')
	const bindEndChange = (e) => {
		endDate.value = e.detail.value
	}
	const reset = () => {
		search.value = ''
		supply.value = ''
		startDate.value = ''
		endDate.value = ''
		list.length = 0
		showPopup.value = false
		if(active==0){
			getlist()
		}else{
			getSettltementList()
		}
	}
	const searchList = ()=>{
		list.length = 0
		showPopup.value = false
		if(active==0){
			getlist()
		}else{
			getSettltementList()
		}
	}
	const alertDialog = ref(null)
	const dialogToggle = (type) => {
		let find = list.filter(item => {
			return item.checked == true
		})
		if (find.length > 0) {
			alertDialog.value.open()
		} else {
			uni.showToast({
				title: '请选择结算单',
				icon: 'none'
			})
		}
	}
	const submit = () => {
		let arr = JSON.parse(uni.getStorageSync('settlement'))
		let settlemenList = [] 
		for(let i = 0;i<arr.length;i++){
			let obj = {
				amount: arr[i].newPrice,
			}
			if(arr[i].newPrice){
				obj.amount = arr[i].newPrice
			}else{
				obj.amount = arr[i].amount
			}
			// if(arr[i].is_bh==0){
			// 	obj.purchase_inbound_id = arr[i].id
			// }else{
				obj.settlement_id = arr[i].id
			// }
			settlemenList.push(obj)
		}
		let data = {
			data: settlemenList
		}
		supplySettlement(data).then(res => {
			let arr2 = arr.filter(item => {
				return item.checked == false
			})
			uni.setStorageSync('settlement', JSON.stringify(arr2))
			uni.showToast({
				title: '提交成功'
			})
			list.length = 0
			getlist()
		})
	}
	const download = (url)=>{
		// #ifdef  APP-PLUS
		plus.runtime.openURL(url, function(res) {});
		// #endif
		
		//#ifndef  APP-PLUS		
		window.open(url)
		//#endif
	}
</script>

<style lang="scss">
	.content{
		padding-bottom: 30rpx;
	}
	.tab {
		width: 100%;
		margin-top: 2rpx;
		display: flex;
		justify-content: space-between;

		.list {
			width: 33%;
			line-height: 80rpx;
			font-size: 28rpx;
			text-align: center;
			background-color: #fff;
		}

		.active {
			background-color: #ffc400;
		}
	}

	.item {
		margin: 20rpx 0;
		background-color: #fff;
		padding: 20rpx 30rpx 20rpx 80rpx;
		box-sizing: border-box;
		position: relative;

		.iconbox {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
		}


		.code {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;

			.status {
				font-size: 28rpx;
			}
		}

		.list {
			width: 100%;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333;

			.name {
				display: inline-block;
				width: 180rpx;
				text-align: right;
				margin-right: 30rpx;
			}
		}
	}

	.btnbox {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		padding: 0 30rpx;
		box-sizing: border-box;
		gap: 30rpx;
		margin: 30rpx 0;

		.btn {
			height: 50rpx;
			width: 140rpx;
			font-size: 24rpx;
			line-height: 50rpx;
			text-align: center;
			background-color: #ffc400;
			border-radius: 10rpx;
		}
	}

	.fixedbtn {
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 4rpx soldi #f7f7f7;
	}

	.popup {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 999;
		transition: all .5s;

		.box {
			width: 100%;
			height: 360rpx;
			background-color: #fff;
			padding: 50rpx 30rpx;
			box-sizing: border-box;
			gap: 10rpx;
			padding-bottom: 20rpx;

			.ipt {
				height: 70rpx;
				border: 2rpx solid #e5e5e5;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-items: center;
				color: #333;
			}

			.btnbox {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;

				.btn {
					width: 180rpx;
					height: 60rpx;
					background-color: #f8f8f8;
					line-height: 60rpx;
					text-align: center;
					border-radius: 12rpx;
					font-size: 28rpx;
				}

				.search {
					background-color: #ffc400;
				}
			}
		}
	}
</style>